﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .search-box {
        padding: 15px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        margin-bottom: 15px;
    }
    .search-box .layui-form-item {
        margin-bottom: 10px;
    }
    .search-box .layui-inline {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .search-box .layui-input-inline {
        width: 180px !important;
    }
    .search-box .layui-form-label {
        width: 100px;
        padding: 5px 15px;
    }
    .search-box .layui-input {
        height: 32px;
        line-height: 32px;
    }
    .search-box .layui-btn {
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
    }
    .page-container {
        padding: 0 15px;
    }
    /* 添加表格样式 */
    .layui-table-cell {
        height: auto;
        line-height: 28px;
        padding: 8px 15px;
        position: relative;
        box-sizing: border-box;
    }
    .layui-table-box {
        background-color: #fff;
    }
    .layui-table {
        margin: 0;
    }
    /* 设置表格容器宽度 */
    .layui-table-view {
        margin: 0 !important;
    }
</style>
<body>
    <div class="search-box">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">盘点类型:</label>
                    <div class="layui-input-inline">
                        <select id="planType" name="planType">
                            <option value="">请选择盘点类型</option>
                            <option value="定期盘点">定期盘点</option>
                            <option value="不定期盘点">不定期盘点</option>
                            <option value="全面盘点">全面盘点</option>
                            <option value="重点盘点">重点盘点</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">盘点号编码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="planCode" name="planCode" placeholder="请输入盘点号编码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">盘点号名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="planName" name="planName" placeholder="请输入盘点号名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">盘点日期</label>
                    <div class="layui-input-inline">
                        <input type="text" id="planDate" name="planDate" placeholder="请选择盘点日期" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">仓库名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="warehouseName" name="warehouseName" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">单据状态</label>
                    <div class="layui-input-inline">
                        <select id="status" name="status">
                            <option value="">请选择单据状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已确认">已确认</option>
                            <option value="审批中">审批中</option>
                            <option value="已审批">已审批</option>
                            <option value="已完成">已完成</option>
                            <option value="已拒绝">已拒绝</option>
                            <option value="已完成生成工单">已完成生成工单</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 0;">
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchForm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">
        @Html.AntiForgeryToken()
        <table id="maintenanceTable" lay-filter="maintenanceTable"></table>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'laydate'], function () {
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate;
        var $ = layui.jquery;

        // 初始化日期选择器
        laydate.render({
            elem: '#planDate'
        });

        // 初始化表格
        var tableIns = table.render({
            elem: '#maintenanceTable',
            url: '/InventoryCounts/GetInventoryCounts',
            method: 'get',
            page: false,
            cols: [[
                { type: 'checkbox', fixed: 'left', width: 50 },
                { field: 'inventoryCode', title: '盘点单编号' },
                { field: 'inventoryName', title: '盘点单名称' },
                { field: 'inventoryType', title: '盘点类型' },
                { field: 'inventoryDate', title: '盘点日期', templet: function (d) {
                    return d.inventoryDate ? layui.util.toDateString(new Date(d.inventoryDate), 'yyyy-MM-dd') : '';
                }},
                { field: 'warehouseName', title: '仓库名称' },
                { field: 'states', title: '单据状态' }
            ]],
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.length,
                    "data": res
                };
            },
            height: 'full-220',
            even: true,
            size: 'lg',
            cellMinWidth: 100
        });

        // 搜索表单提交
        form.on('submit(searchForm)', function (data) {
            var formData = {
                inventoryCode: $('#planCode').val(),
                inventoryName: $('#planName').val(),
                inventoryType: $('#planType').val(),
                inventoryDate: $('#planDate').val(),
                warehouseName: $('#warehouseName').val(),
                states: $('#status').val()
            };
            
            // 重载表格
            tableIns.reload({
                where: formData
            });
            return false;
        });

        // 重置表单
        window.resetForm = function() {
            $('#planCode').val('');
            $('#planName').val('');
            $('#planType').val('');
            $('#planDate').val('');
            $('#warehouseName').val('');
            $('#status').val('');
            form.render('select');
            
            // 重载表格
            tableIns.reload({
                where: {}
            });
        };

        // 全选
        form.on('checkbox(selectAll)', function (data) {
            var checkStatus = data.elem.checked;
            $('input[type="checkbox"]').prop('checked', checkStatus);
            form.render('checkbox');
        });

        // 批量删除
        window.batchDeleteRecords = function() {
            var checkStatus = table.checkStatus('maintenanceTable');
            var data = checkStatus.data;
            if (data.length === 0) {
                layer.msg('请选择要删除的记录');
                return;
            }
            
            layer.confirm('确定要删除选中的记录吗？', function(index) {
                // TODO: 实现批量删除逻辑
                layer.close(index);
            });
        };

        // 新增盘点单
        window.openAddMaintenanceView = function() {
            layer.open({
                type: 2,
                title: '新增盘点单',
                area: ['800px', '600px'],
                content: '/InventoryCounts/Add',
                maxmin: true
            });
        };
    });
</script>